<template>
  <div class="boxs">
    <el-card>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item :label="$t('upload.updateTime')">
          <el-date-picker
            v-model="value1"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            :start-placeholder="$t('table.start')"
            :end-placeholder="$t('table.end')"
            @change="timeChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
            >{{$t('table.search')}}</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
            >{{$t('table.reset')}}</el-button
          >
        </el-form-item>
      </el-form>
      <div class="flex_between">
        <div></div>
        <el-button
          type="primary"
          icon="el-icon-upload"
          size="small"
          @click="handleEdit"
          >{{$t('upload.upload')}}</el-button
        >
      </div>
      <el-table
        border
        :data="moreArr"
        style="margin-top: 15px"
        v-loading="loading"
      >
        <el-table-column label="index" align="center" width="60" type="index" />
        <el-table-column :label="$t('upload.ProjectName')" align="center" prop="type" />
        <el-table-column :label="$t('upload.title')" align="center" prop="title" />
        <el-table-column :label="$t('upload.content')" align="center" prop="content" />

        <el-table-column
        :label="$t('upload.versionName')"
          align="center"
          width="180"
          prop="version"
        />

        <el-table-column
        :label="$t('upload.versionCode')"
          align="center"
          width="120"
          prop="version_code"
        >
        </el-table-column>
        <el-table-column
        :label="$t('upload.updateTime')"
          align="center"
          width="180"
          prop="update_date"
        />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.size"
        @pagination="getMore"
      />
    </el-card>

    <el-dialog :title="$t('upload.upload')" :visible.sync="dialogVisible" width="800px">
      <el-form
        class="demo-form-inline"
        label-width="80px"
        :model="form"
        :rules="rules"
        ref="ruleForm"
      >
        <el-row>
          <el-col :span="24">
              <el-form-item :label="$t('upload.content')" prop="description">
                <el-input
                  :autosize="{ minRows: 4 }"
                  type="textarea"
                  v-model="form.description"
                  placeholder=""
                  resize="none"
                />
              </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('upload.file')" prop="file">
              <el-upload
                class="upload-demo"
                drag
                limit="1"
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                :http-request="uploadHandel"
                :on-remove="remeveFile"
                ref="upload"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  {{$t('upload.uploadText')}}<em>  {{$t('upload.uploadText1')}}</em>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('tagsView.close')}}</el-button>
        <el-button type="warning" :loading="addLoading" @click="affirm"
          >{{$t('table.confirm')}}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
    <script>
import { findUploadPckageList, upload } from "@/api/uploadPackage";

import pk from "@/utils/pk";
export default {
  name: "uploadPackage",
  data() {
    return {
      queryParams: {
        page: 1,
        size: 10,
        dateRange: {
          start: "",
          end: "",
        },
        type: "",
      },
      total: 0,
      loading: false,
      addLoading: false,
      moreArr: [],
      dialogVisible: false,
      form: {
        description: "",
        file: "",
      },
      search: "",
      rules: {
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        file: [{ required: true, message: "请上传文件", trigger: "blur" }],
      },
      value1: "",
    };
  },
  created() {
    this.getMore();
  },
  methods: {
    uploadHandel(e) {
      this.form.file = e.file;
    },
    remeveFile() {
      this.form.file = "";
    },
    timeChange() {
      this.queryParams.dateRange.start = this.value1[0];
      this.queryParams.dateRange.end = this.value1[1];
      this.handleQuery();
    },
    getKeyByValue(object, value) {
      return Object.keys(object).find((key) => object[key] === value);
    },
    async getMore() {
      this.loading = true;
      let { data, total } = await findUploadPckageList(this.queryParams);
      this.loading = false;
      this.moreArr = data;
      this.total = total;
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getMore();
    },
    async affirm() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        let loading;
        try {
          this.form.description = this.form.description.replace(/\r\n|\r|\n/g, '\\n');
          const fileType = ["ipa", "apk", "aab"];
          const fileName = this.form.file.name.split(".");
          const fileExt = fileName[fileName.length - 1];
          const isTypeOk = fileType.indexOf(fileExt) >= 0;
          if (!isTypeOk) {
            this.$message.error(
              `The file format is incorrect, please upload an ${fileType.join(
                "/"
              )} format file!`
            );
            return false;
          }
          let data = new FormData();
          data.append("file", this.form.file); // 假设file是你的文件对象
          data.append("content", this.form.description);
          loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.addLoading = true;
          await upload(data); 
          this.addLoading = false;
          this.$message.success("操作成功");
          this.getMore();
          this.dialogVisible = false;
          this.form.description = "";
          this.form.file = "";
        } catch (e) {
          this.addLoading = false;
        } finally {
        //   this.form.description = "";
          this.form.file = "";
          loading.close();
          this.addLoading = false;
          if (this.$refs.upload) {
            this.$refs.upload.clearFiles(); // 清除文件列表
          }
        }
      }); 
    }, 
    openDialog() {
      this.form = {};
      this.dialogVisible = true;
    },
    handleEdit(i, row) {
      this.form.description = "";
      this.form.file = "";
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles(); // 清除文件列表
      }
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(async () => {
        await deleteTemplateType({ id: row.id });
        this.getMore();
        this.$message({
          message: "删除成功！",
          type: "success",
        });
      });
    },
    resetQuery() {
      this.queryParams.state = null;
      this.queryParams.package_name = null;
      this.queryParams.dateRange.start = null;
      this.queryParams.dateRange.end = null;
      this.queryParams.page = 1;
      this.value1 = "";
      this.getMore();
    },
  },
};
</script>
    <style lang="scss" scoped>
.boxs {
  padding: 20px;
}
::v-deep.el-input.is-disabled .el-input__inner {
  color: #333 !important;
}
::v-deep.el-textarea.is-disabled .el-textarea__inner {
  color: #333 !important;
}

::v-deep .el-upload {
  width: 100% !important;
}
::v-deep .el-upload-dragger {
  width: 100% !important;
}
</style>
    